<!--
@author lyy
-->
<template>
  <a-select
      v-model:value="selectValue"
      :style="`width: ${width}`"
      :placeholder="props.placeholder"
      :showSearch="true"
      :allowClear="true"
      :labelInValue="labelInValue"
      optionFilterProp="label"
      option-label-prop="label"
      :size="size"
      :disabled="disabled"
      @change="onChange"
  >
    <a-select-option value="" label="" disabled>名称 &nbsp;&nbsp; <span v-if="showQuanytity">库存</span>  </a-select-option>
    <a-select-option value="" label="">请选择</a-select-option>
    <a-select-option v-for="item in fabricMaterialList" :label="item.fabricMaterialName" :key="item.id" :value="item.id" @click="sendItem(item)">
      {{item.fabricMaterialName}} &nbsp;&nbsp; <span role="img" :aria-label="item.fabricMaterialName" v-if="showQuanytity">{{item.quantity}}</span>
    </a-select-option>
  </a-select>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { employeeApi } from '/@/api/system/employee-api';
import { smartSentry } from '/@/lib/smart-sentry';
import {fabricMaterialsApi} from "/@/api/business/fabric-materials/fabric-materials-api.js";

// =========== 属性定义 和 事件方法暴露 =============

const props = defineProps({
  value: [Number, Array,String],
  placeholder: {
    type: String,
    default: '请选择',
  },
  width: {
    type: String,
    default: '100%',
  },
  size: {
    type: String,
    default: 'default',
  },
  labelInValue:{
    type: Boolean,
    default: false,
  },
  disabled:{
    type:Boolean,
    default:false,
  },
  //展示数量
  showQuanytity:{
    type:Boolean,
    default:true,
  },
  // 禁用标识
  disabledFlag: {
    type: Number,
    default: null,
  },



});

const emit = defineEmits(['update:value', 'change','getItem']);

// =========== 查询数据 =============

//耗材列表数据
const fabricMaterialList = ref([]);
async function query() {
  try {
    let resp = await fabricMaterialsApi.queryAll();
    fabricMaterialList.value = resp.data;
  } catch (e) {
    smartSentry.captureError(e);
  }
}
onMounted(query);

// =========== 选择 监听、事件 =============

const selectValue = ref(props.value);
watch(
    () => props.value,
    (newValue) => {
      selectValue.value = newValue;
    }
);

function onChange(value) {
  emit('update:value', value);
  // console.log('value',value)
  emit('change', value);

}

function sendItem(item){
  emit('getItem', item);
}


</script>
